<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品销量柱状图</title>
  <style>
    .chart-container {
      display: inline-block;
      vertical-align: top; /* 垂直对齐方式，根据需要调整 */
      margin-right: 20px; /* 可选：增加间距 */
    }
  </style>
  <!-- 引入 ECharts -->
  <script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
  <script type="text/javascript" src="../lib/echarts/echarts.theme.js"></script>
  <script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/vue.js"></script>
</head>
<body>
<div class="chart-container">
<div id="chart" style="width: 800px; height: 600px;"></div>
<div id="pieChart" style="width: 800px; height: 300px;"></div>
</div>
<script>
  // 初始化 ECharts 实例
  var chart = echarts.init(document.getElementById('chart'));
  var pieChart = echarts.init(document.getElementById('pieChart'));

  // 使用 Axios 发起 GET 请求获取数据
  axios.get('../../chart.action?op=getChart')
          .then(function (response) {
            // 数据处理
            var data = response.data;

            // 提取商品名称和销量数据
            var goodsData = data.map(function (item) {
              return {
                name: item.goods_name,
                praise: item.praise
              };
            });

            // 按销量（praise）降序排序
            goodsData.sort(function (a, b) {
              return b.praise - a.praise;
            });

            // 只保留前五个商品数据，其余合并为“其他”
            var topGoodsData = goodsData.slice(0, 5);
            var otherPraise = goodsData.slice(5).reduce(function (acc, val) {
              return acc + val.praise;
            }, 0);

            // 构造柱状图需要的数据
            var topGoodsNames = topGoodsData.map(function (item) {
              return item.name;
            });
            var topPraises = topGoodsData.map(function (item) {
              return item.praise;
            });

            // ECharts 柱状图配置项
            var barOption = {
              title: {
                text: '商品点赞统计柱状图'
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: topGoodsNames
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                name: '点赞数',
                type: 'bar',
                data: topPraises
              }]
            };

            // 使用柱状图配置项显示图表
            chart.setOption(barOption);

            // 计算所有商品点赞数总和
            var totalPraise = goodsData.reduce(function (acc, val) {
              return acc + val.praise;
            }, 0);

            // 构造扇形图需要的数据，包括前五个商品和“其他”
            var pieData = topGoodsData.map(function (item) {
              return {
                name: item.name,
                value: (item.praise / totalPraise * 100).toFixed(2)
              };
            });
            // 添加其他数据
            if (otherPraise > 0) {
              pieData.push({
                name: '其他',
                value: (otherPraise / totalPraise * 100).toFixed(2)
              });
            }

            // ECharts 扇形图配置项
            var pieOption = {
              title: {
                text: '所有商品点赞数占比',
                subtext: '总点赞数: ' + totalPraise
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              series: [{
                name: '点赞占比',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: pieData
              }]
            };

            // 使用扇形图配置项显示图表
            pieChart.setOption(pieOption);
          })
          .catch(function (error) {
            console.error('数据获取失败：', error);
          });
</script>
</body>
</html>